<template>
	<view class="recharge">
		<banner :ad-list="adList" v-if="adList.length> 0" h=130></banner>
		
		<!-- <view class="input-box">
			<view class="tips text-gray">任意充值{{account_name}}金额</view>
			<view class="mui-input-row">
				<input type="number" :focus="true" placeholder="请输入充值金额" v-model="amount" />
		    </view>
		</view> -->
		
		<view class="navbar">
			<view class="item" @tap="showCart = false" :class="!showCart ? 'active' : ''">
				<text>在线充值</text>
			</view>
			<view class="item" @tap="showCart = true"  :class="showCart ? 'active' : ''">
				<text>充值卡充值</text>
			</view>
		</view>
		
		<view class="cart-box add" v-if="showCart">
			<view class="uni-list">

				<view class="uni-list-cell">
					<view class="uni-list-cell-navigate">
						<view class="iconfont icon-zhanghao"></view>
						<input type="text" placeholder="请输入卡号" v-model="no" />
					</view>
				</view>
				<view class="uni-list-cell">
					<view class="uni-list-cell-navigate">
						<view class="iconfont icon-mima"></view>
						<input type="text" password="true" placeholder="请输入密码" v-model="password">
					</view>
				</view>
			</view>
		</view>
		
		<view class="package-box" v-else>
			<view class="type-list">
				<view class="item" @tap="selectType(item, index)" :class="type_index == index ? 'active': ''" v-for="(item, index) in types" :key="index">{{item.name}}</view>
			</view>
			
			<view class="phone">
				<view class="iconfont icon-shoujihao"></view>
				<input type="number" v-model="mobile" />
			</view>
			
			<view class="package-list" v-if="types[type_index]['package'].length > 0">
				<view class="item" v-for="(item, index) in types[type_index]['package']" :key="index" :class="package_id == item.id ? 'active': ''" @tap="package_id = item.id">
					<view class="amount">{{item.content}}</view>
					<view>售价：{{item.pay_content}}</view>
					<view>{{item.time_content}}</view>
				</view>
			</view>

			<view class="no-data" v-else>该类型没有相关套餐</view>
		</view>
		
		<view class="fixed-bottom-btn" @tap="checkRecharge()">确认充值</view>
	</view>
</template>

<script>
	import Request from '../../common/request.js'
	import banner from '../../components/banner.vue';
	
	export default {
		components: {
			banner
		},
		data() {
			return {
				showCart: true,
				types: [],
				type_index: 0,
			    amount: '',
				adList: [],
				mobile: '',
				package_id: '',
				no: '',
				password:'',
			};
		},
		onLoad(options) {
			var userinfo = uni.getStorageSync('userinfo');
			this.mobile = userinfo.mobile;
			this._get_package();
		},
		methods: {
			//获取充值套餐
			_get_package: function(){
				var that = this;
				Request.send({
					url: 'recharge/getPackage',
					data: {type: that.account_type},
					sCallback: function(res) {
						that.adList = res.data.banner;
						that.types = res.data.types;
					}
				})
			},

			//选择充值帐号类型
			selectType(item, index) {
				this.type_index = index;
				this.package_id = '';
			},

			checkRecharge(){
				if(this.showCart) {
					this.cartRecharge();
				} else {
					this.submitRecharge();
				}
			},
			
			//提交充值
			submitRecharge: function(){
				var that = this;
				var postData = {
					type: that.types[that.type_index]['type'],
					package_id: that.package_id,
					amount: that.amount,
					phone: that.mobile
				}

				if(!that.mobile) {
					Request.alert('请填写要充值的手机号');
					return;
				}

				if(!that.package_id) {
					Request.alert('请选择充值套餐');
					return;
				}
				
				Request.send({
					url: 'recharge/recharge',
					data: postData,
					sCallback: function(res) {
						if(res.code == 200) {
							uni.showToast({
								title: res.msg,
								success() {
									uni.navigateBack({})
								}
							})
						} else if(res.code == 201) {
							uni.redirectTo({
								url: '/pages/order/payorder?id='+res.data.order_id+'&type=recharge'
							})
							
						} else {
							
							Request.alert(res.msg);
						}
					}
				})
			},
			//充值卡充值 
			cartRecharge:function(){
				if(!this.no) {
					Request.alert('请填写充值卡卡号');
					return;
				}
				
				if(!this.password) {
					Request.alert('请填写充值卡密码');
					return;
				}
				
				var that = this;
				Request.send({
					url: 'recharge/cardRecharge',
					data: {
						no:that.no, 
						password:that.password
					},
					sCallback: function(res) {
						uni.showToast({
							title: res.msg,
							success() {
								uni.navigateBack({
									
								})
							}
						})
					}
				})
				
			}
		}
	}
</script>

<style>
	page{
		background: #fff;
	}
	.recharge{
		margin-bottom: 90upx;
		font-size: 28upx;
		background: #fff;
	}
	.uni-list .right{
		display: flex;
		align-items: center;
	}
	.input-box{
		background: #fff;
		padding: 20rpx;
		margin-top: 10upx;
		
	}
	
	.input-box>view{
		border-bottom: 1upx solid #eee;
		height: 80upx;
		line-height: 80upx;
	}

	.recharge .navbar{
		display: flex;
		flex-direction: row;
		border-bottom: 1upx solid #eee;
		height: 80upx;
		align-items: center;
	}

	.recharge .navbar .item{
		display: flex;
		justify-content: center;
		flex: 1;
	}

	.recharge .navbar .item text{
		border-bottom: 4upx solid #fff;
	}

	.recharge .navbar .item.active text{
		border-color: #FC3C3C;
	}

	.recharge .type-list{
		display: flex;
		flex-direction: row;
		padding: 20upx;
		box-sizing: border-box;
		justify-content: space-between;
	}

	.recharge .type-list .item{
		padding: 10upx 30upx;
		background: rgba(0, 0, 0, 0.1);
		color: #6D6D6E;
		border: 1upx solid rgba(0, 0, 0, 0.1);
		border-radius: 8upx;
	}

	.recharge .type-list .item.active{
		border-color: #FC4444;
		color: #FC4444;
		background: #FCE3E3;
	}

	.recharge .phone{
		padding: 20upx;
		display: flex;
		align-items: center;
		flex-direction: row;
	}
	.recharge .phone .iconfont{
		width: 60upx;
		font-size: 40upx;
		color: #999;
	}

	.recharge .phone input{
		flex:1;
		height: 80upx;
		display: flex;
		align-items: center;
		font-size: 40upx;
	}

	.recharge .phone uni-input input{
		height: 80upx;
		line-height: 80upx;
	}

	.recharge .package-list{
		width: 750upx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		padding-top: 20upx;
		padding-left: 20upx;
	}

	.recharge .package-list .item{
		width: 220upx;
		margin-right: 20upx;
		margin-bottom: 20upx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		text-align: center;
		border: 1upx solid #FC4444;
		color: #FC4444;
		padding: 20upx 0;
		border-radius: 10upx;

	}

	.recharge .package-list .item.active{
		background: #FCE3E3;
	}

	.recharge .package-list .item .amount{
		font-weight: 600;
		font-size: 32upx;
	}

	.recharge .add{
		font-size: 28upx;
		padding: 40upx 20upx;
	}
	
	.recharge .add .radius-btn{
		margin-top: 70upx;
	}
	
	.recharge .add picker{
		margin-right: 20upx;
	}
	
	.recharge .add .iconfont{
		width: 80upx;
		font-size: 40upx;
	}
	
	.recharge .add input{
		flex: 1;
	}
</style>
